<template>
	<div class="file-upload">
		<el-input type="text" placeholder="请输入文件地址" v-model='changeFileSrc' style="width: 335px;"></el-input>
		<el-button @click="delFile">清空</el-button>
		<el-button type="primary" @click="clickUpload">选择文件</el-button>
		<!-- 上传窗口 开始 -->
		<el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="600px" append-to-body>
			<template>
				<el-upload
				ref="upload"
				class="upload-demo"
				drag
				:limit="limit"
				:on-exceed="handleExceed"
				:before-upload="beforeUpload"
				:on-success="handleSuccess"
				:on-error="handleError"
				:action="domain + '/' + $api.uploadFile"
				name="UploadForm[file]"
				:data="{'appid': this.appid}"
				:with-credentials="true"
				multiple>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只支持上传zip doc/xls/pdf mp3/mp4文件，且不超过{{ maxSize }}MB</div>
				</el-upload>
				<el-button type="primary" class="insert" @click="insertFile">插入文件</el-button>
			</template>
		</el-dialog>
		<!-- 上传窗口 结束 -->
	</div>
</template>

<script>
export default {
	props: ['domain', 'appid', 'maxSize', 'fileSrc', 'field'],
	data () {
		return {
			limit: 1,//限制上传数量
			uploadDialogVisible: false,//上传弹框 显示状态
			uploadFile: '',//上传成功的文件路径，这个不是数组，因为默认的只有1个文件
		}
	},
	methods: {
		/*单击选择文件 显示窗口*/
		clickUpload: function(){
			this.uploadDialogVisible = !this.uploadDialogVisible
		},
		/*文件超出个数限制时的钩子 超过 limit - fileList.length 的值时触发, 主要是验证*/
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件`);
		},
		/*选择后触发*/
		beforeUpload(file) {
			// console.log(file.type)
			const isZIP= file.type === 'application/x-zip-compressed';
			const isDOC = (file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
			const isXLS = (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
			const isPDF = file.type === 'application/pdf';
			const isMP3 = file.type === 'audio/mp3';
			const isMP4 = file.type === 'video/mp4';
			const isLt2M = file.size / 1024 / 1024 < this.maxSize;
			let pass = true
			this.totalSelect++

			if (!isZIP && !isDOC && !isXLS && !isPDF && !isMP3 && !isMP4) {
				pass = false
				this.$message.error('上传文件只能是 ZIP 或 DOC/XLS/PDF 或 MP3/MP4 格式!');
				return false
			}
			if (!isLt2M) {
				pass = false
				this.$message.error(`上传文件大小不能超过 ${this.maxSize} MB!`);
				return false
			}
			// console.log(file)
			return (isZIP || isDOC || isXLS || isPDF || isMP3 || isMP4) && isLt2M;
		},
		/*上传成功后*/
		handleSuccess(res, file, fileList) {
			// console.log(res)
			if(res.code == 0){
				this.uploadFile = res.info
			}else{
				this.$message.warning(res.info);
			}
		},
		/*上传失败后*/
		handleError(err, file, fileList) {
			// console.log(file, '999')
			this.$message.error(`上传失败!`);
		},
		/*插入上传的文件到父组件*/
		insertFile(){
			if(this.uploadFile == ''){
				this.$message.error('您没有上传文件!');
			}else{
				// this.$emit('insertFile', this.uploadFile, this.field)//父组件追加上传的图片
				this.changeFileSrc = '/' + this.uploadFile
				this.uploadDialogVisible = false//关闭上传窗口
				this.uploadFile = ''//清空已经上传的列表
				this.$refs.upload.uploadFiles = []//清空队列
			}
		},
		/*删除父组件的文件*/
		delFile(){
			this.$emit('delFile', this.field)
		},
	},
	computed: {
		changeFileSrc: {
			get: function () {
				return this.fileSrc
			},
			set: function (val) {
				this.$emit('insertFile', val, this.field)//父组件追加上传的图片
			}
		},
	}
}
</script>
<style lang="stylus" scoped>
/deep/ .el-upload
	width: 100% !important
	.el-upload-dragger
		border-radius: 0px
		width: 100% !important
.insert
	margin-top: 15px
	width: 552px
</style>